<template>
  <div class="memberPage headspace">
    <Header active="0"></Header>
    <div class="bread" style="text-align: right;">
      <div class="page-inner">
        <NuxtLink to="/">首頁</NuxtLink>><span>個人中心</span>
      </div>
    </div>
    <div class="member">
      <div class="page-inner">
        <div class="mtit f40 font-m">
          <span>個人中心</span>
        </div>
        <div class="mbox flex">
          <div class="ml">
            <div class="avatar">
              <img :src="userInfo.avatar" alt="">
            </div>
            <div class="btns flex">
              <el-upload ref="upload" class="upload-demo" action="http://h9.gzwhir.com:1999/api/user/uploadimage"
                :limit="1" :on-success="handleAvatarSuccess" :auto-upload="true">
                <template #trigger>
                  <div class="btn">
                    修改頭像
                  </div>
                </template>
              </el-upload>
            </div>
            <div class="info">
              <div class="p" :style="{textAlign:userInfo.group_id=='1'?'center':'left'}">用户等級：{{ userInfo.group_id=='1'?'注册用户':userInfo.group_id=='2'?'认证用户':'VIP用户' }}</div>
            <div class="api p" v-if="userInfo.group_id=='3'">API授权列表：<a class="api_btn" @click="apiShow=true">点击查看</a></div>
            <div class="p" v-if="userInfo.group_id=='3'">API到期时间：{{userInfo.rulesexpired}}</div>
            </div>
            <!-- <div class="lv">{{ userInfo.level }}</div> -->
          </div>
          <div class="mr">
            <div class="mform">
              <el-form ref="ruleFormRef" :model="userInfo" :rules="formRules">
                <el-form-item>
                  <div class="line flex">
                    <div class="lb f20 font-m">用戶名</div>
                    <div class="lr"><el-input v-model="userInfo.username" disabled></el-input></div> 
                  </div>
                </el-form-item>
                <el-form-item label="">
                  <div class="line flex">
                    <div class="lb f20 font-m">郵箱</div>
                    <div class="lr"><el-input v-model="userInfo.email" disabled></el-input></div>
                  </div>
                </el-form-item>
                <el-form-item label="">
                  <div class="line flex">
                    <div class="lb f20 font-m">公司</div>
                    <div class="lr"><el-input v-model="userInfo.company" disabled></el-input></div>
                  </div>
                </el-form-item>
                <el-form-item label="">
                  <div class="line flex">
                    <div class="lb f20 font-m">國家</div>
                    <div class="lr"><el-input v-model="userInfo.country" disabled></el-input></div>
                  </div>
                </el-form-item>
                <el-form-item label="">
                  <div class="line flex">
                    <div class="lb f20 font-m">職業</div>
                    <div class="lr"><el-input v-model="userInfo.job" disabled></el-input></div>
                  </div>
                </el-form-item>
                <el-form-item label="">
                  <div class="line flex">
                    <div class="lb f20 font-m">公司驗證</div>
                    <div class="lr">
                      <div class="gbtn flex" @click="dialogShow=true;" v-if="userInfo.level=='0'">
                          <p>點撃編輯上傳認證信息</p>
                          <div class="add_w"><img src="/images/add.png" /></div>
                      </div>
                      <div class="gbtn flex" v-if="userInfo.level=='1'">
                          <p>{{userInfo.company}} 待認證中</p>
                      </div>
                      <div class="gbtn flex" v-if="userInfo.level=='2'">
                          <p>{{userInfo.company}} 驗證通過</p>
                      </div>
                      <div class="gbtn flex" v-if="userInfo.level=='3'" @click="dialogShow=true;">
                          <p>{{userInfo.company}} 驗證失敗，點擊编輯重新認證</p>
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label=" ">
                  <div class="line flex">
                    <div class="lb f20 font-m"></div>
                    <div class="lr"><NuxtLink to="/member/profile" class="form_btn f18 font-m confirm_btn">去編輯</NuxtLink></div>
                  </div>
                  
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 弹出框 -->
  <el-dialog v-model="dialogShow" class="mindailog">
      <el-form v-model="dialogForm">
        <el-form-item>
          <p class="fit font-m f16">公司名稱</p>
          <el-input
            v-model="userInfo.company"
            placeholder="請輸入公司名稱"
            style="height: 75%"
          />
        </el-form-item>
        <el-form-item>
          <p class="fit font-m f16">職位</p>
          <el-input
            v-model="userInfo.position"
            placeholder="請輸入職位"
            style="height: 75%"
          />
        </el-form-item>
        <el-form-item>
          <p class="fit font-m f16">公司驗證</p>
          <div class="license_upload">
            <el-upload
              ref="upload"
              class="upload-demo"
              action="http://h9.gzwhir.com:1999/api/user/uploadimage"
              :limit="1"
              :on-success="handleSuccess"
              :auto-upload="true"
            >
              <template #trigger>
                <div class="uploadTxt">
                  <div class="add_w">+</div>
                  <p>上傳營業執照</p>
                </div>
              </template>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item>
          <div
            class="form_btn f18 font-m confirm_btn"
            @click="submit"
          >
          確認
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

  <el-dialog v-model="apiShow" class="apidailog">
    <div class="apiList">
      <div class="list_i" v-for="i in userInfo.apis">
        <img :src=" i.select=='1'?'/cn/images/yes.png':'/cn/images/no.png'" alt="" class="list_icon">
        {{ i.ingredient }}
      </div>
    </div>
  </el-dialog>
</template>
<script>
	import {
		userInfo,upavatar
	} from "@/api/sections";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
export default {
  async setup() {

  },
  data() {
    return {
      dialogShow:false,
      apiShow:false,
      dialogForm: {},
      graybg:true,
      userInfo: {
      },
	  token:'',
      formRules: {
        firstName: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
        lastName: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
        company: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
        Country: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
        job: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
        license: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleAvatarSuccess(res) {
      if (res.code == 1) {
		
		upavatar({
			avatar:res.data.fullurl,
			token: this.token,
		}).then((res1) => {
		this.getUser()
		});
		
      }
    },
    handleSuccess(res) {
      if (res.code == 1) {
        this.userInfo.license = res.data.fullurl;
      }
    },
	getUser(){
		if (localStorage.getItem("userinfo")) {
			this.token = JSON.parse(localStorage.getItem("userinfo")).token;
		}
		userInfo({
			token: this.token,
		}).then((res) => {
			this.userInfo=res.data.userinfo
					this.userInfo.token=this.token
						localStorage.setItem(
						  "userinfo",
						  JSON.stringify(this.userInfo)
						);
		});
	},
    submit(){
      var that=this;
      that.dialogShow = false;
    }
  },
  beforeRouteEnter(to, form, next) {
    next((vm) => {
      vm.pageFrom = form.path;
      console.log(vm.pageFrom, 1231313);
    });
  },
  mounted: function () {
	  this.getUser()
  }
};
</script>
<style scoped>
.member .mtit{text-align:center;margin-bottom:5%;}
.member .mtit span{display:inline-block;border-bottom:1px solid #f4e5e7;line-height:1;padding-bottom:40px;position:relative;}
.member{padding:5% 0;border-top:1px solid #e8e8e8;}
.member .mtit span:after{content:"";position:absolute;left:50%;width:2em;height:3px;background:#c6031d;bottom:0;margin-left:-1em;}
.member .mbox{padding:5% 0;background:#fff;border-radius:30px;align-items:stretch;}
.member .mbox .ml{flex:0 0 auto;width:400px;border-right:1px solid #eee;}
.member .api_btn{color: #4bb1b9;}
.member .api_btn:hover{text-decoration: underline;}
.member .info{width: 68%;margin: 0 auto;}
.mbox .ml .avatar{width:170px;height:170px;margin:0 auto 30px;border:4px solid #eee;border-radius:50%;overflow:hidden;}
.mbox .ml .avatar img{display:block;width:100%;height:100%;object-fit:cover;}
.mbox .ml .btns .btn{color:#999;border-color:#999;border-radius:40px;}
.mbox .ml .btns .btn:hover{border-color:#4bb1b9;color:#fff;}
.mbox .ml .btns .btn:active{background:#368f96;}
.mbox .ml .btns{justify-content:center;margin-bottom:40px;}
.mbox .ml .p{color:#999;margin-bottom:5px;}
.mbox .ml .lv{color:#c6031d;}
.member .mbox .mr{flex:1 1 auto;padding:0 5%;}
.mform .line{width:100%;justify-content:flex-start;}
.mform .line .lb{flex:0 0 auto;width:13em;text-align:right;padding-right:2em;}
.mform .line .lr{flex:1 1 auto;max-width:475px;}
.mform .line .lr .el-input{display:block;}
.mform .line .lr /deep/.el-input__wrapper{display:flex;border-radius:5px;}
/deep/.el-input__inner{height:48px;padding:0 1em;}
/deep/.el-input.is-disabled .el-input__wrapper{background: #fff}
/deep/.el-input.is-disabled .el-input__inner{background: #fff !important;cursor: default !important;-webkit-text-fill-color:#666;color: #666;}
.mform .line .lr .gbtn{height:48px;background:#f0f0f0;border-radius:5px;justify-content:center;cursor:pointer;user-select:none;color:#666;}
.mform .line .lr .gbtn .add_w{margin-left:10px;}
.mform .line .lr .gbtn:active{background:#dcdcdc;}
.mform .line .confirm_btn{text-align:center;line-height:48px;background:#4bb1b9;text-align:center;color:#fff;border-radius:48px;user-select:none;cursor:pointer;display: block;}
.mform .line .confirm_btn:active{background:#368f96;}
@media(max-width:1024px){
  .member .mbox{display: block;}
  .member .mbox .ml{width: auto;margin-bottom: 30px;}
  .member .info{width: 40%;}
}
@media(max-width:540px){
  .member .mbox{border-radius: 12px;padding: 30px 20px;}
  .mbox .ml .avatar{width: 80px;height: 80px;margin-bottom: 20px;}
  .mbox .ml .btns{margin-bottom: 20px;}
  .mform .line{display: block;}
  .mform .line .lb{width: auto;text-align: left;margin-bottom: 5px;}
  .member .mbox .mr{padding: 0}
  .member .info{width: 80%;}
}
</style>